<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>徽虫争鸣</title>
    <link rel="stylesheet" href="/static/css/reset.css" type="text/css"/>
    <script type="application/javascript" src="/lib/jquery/1.9.1/jquery.js"></script>
    <style>
        html {
            height: 100%
        }

        @-webkit-keyframes rotation {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }

        .Rotation {
            -webkit-transform: rotate(360deg);
            animation: rotation 8s linear infinite;
            -moz-animation: rotation 8s linear infinite;
            -webkit-animation: rotation 8s linear infinite;
            -o-animation: rotation 8s linear infinite;
        }

        .musicctl {
            cursor: pointer;
        }

        body {
            background: url("/static/images/loginback.jpg") fixed;
            filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
            -moz-background-size: 100% 100%;
            background-size: 100% 100%;
            background-attachment: fixed;
        }

        .noticeWrap {
            width: 100%;
            height: 22px;
            background-color: #FFFFFF;
            overflow: hidden;
            line-height: 22px;
            font-size: 0;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }

        .noticeWrap > img {
            width: 22px;
            height: 22px;
            padding: 0 5px;
            display: inline-block;
        }

        .noticeWrap > .noticeCont {
            width: calc(100% - 32px);
            height: 100%;
            overflow: hidden;
            display: inline-block;
            font-size: 16px;
            float: right;
        }

        .login {
            background-color: #fff;
            width: 420px;
            margin-left: -210px;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 10px 0;
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .login h1 {
            font-size: 21px;
            text-align: center;
            line-height: 30px;
            height: 30px;
            padding: 25px 0;
        }

        .formbox {
            padding: 30px 55px;
            font-size: 0;
        }

        .formbox .inputbox {
            height: 45px;
            line-height: 45px;
            width: 310px;
            border: 1px solid #ddd;
            box-sizing: border-box;
            margin-bottom: 20px;
            padding: 0 10px;
            overflow: hidden;
        }

        .formbox .verfctCodeWrap {
            padding-right: 0;
        }

        .formbox .verfctInput {
            width: 160px;
            display: inline-block;
        }

        .formbox .verfctInput input {
            width: 110px !important;
        }

        .formbox .verfctCode {
            width: 130px;
            margin-left: 8px;
            height: 45px;
            display: inline-block;
        }

        .formbox .verfctCode img {
            width: 100%;
            height: 100%;
        }

        .login .inputbox input {
            width: 225px;
        }

        .formbox .inputbox input {
            float: left;
            width: 238px;
            margin: 7.5px 0;
            background-color: #FFFFFF !important;
            box-sizing: border-box;
            height: 30px;
            font-size: 14px;
            color: #333;
        }

        .formbox .inputbox label {
            width: 40px;
            height: 40px;
            margin: 1.5px 10px 1.5px 0;
            line-height: 100%;
            text-align: center;
            float: left;
            font-size: 0;
            color: #333;
        }

        .formbox .inputbox label img {
            width: 26px;
            margin: 7px 0;
        }

        .btn_q {
            width: 310px;
            line-height: 45px;
            background-color: #f41800;
            color: #fff;
            font-size: 15px;
            border-radius: 3px;
            margin-top: 10px;
            cursor: pointer;
        }

        input, button, textarea {
            font-family: "微软雅黑";
            outline: none;
        }

        input, table, tr, td, i {
            padding: 0px;
            margin: 0px;
            border: none;
            list-style: none;
            font-weight: normal;
            font-family: "微软雅黑";
            font-size: 12px;
            color: #333;
            font-style: normal;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div style="width:0;height:0;position:absolute;">
    <audio preload="preload" id="bgm" autoplay>
        <source src="/static/raw/Friendships(Original-Mix).mp3" type="audio/mpeg">
        <source src="/static/raw/Eric Levi - The Mass.mp3" type="audio/mpeg">
    </audio>
</div>

<div class="noticeWrap">
    <img src="/static/images/icon_horn.png" class="musicctl" onclick="play()" alt="公告">
    <div class="noticeCont">
        <marquee>徽虫争鸣</marquee>
    </div>
</div>
<div class="login">
    <form method="post" class="formbox" id="formbox">
        <h1>登 录</h1>
        <div class="inputbox">
            <label for="userName" class=""><img src="/static/images/icon_user.png" alt="用户"></label>
            <input id="userName" name="username" placeholder="请输入用户名"/>
        </div>
        <div class="inputbox">
            <label for="password"><img src="/static/images/icon_lock.png" alt="密码"></label>
            <input id="password" name="password" type="password" placeholder="请输入密码"/>
        </div>
        <div class="inputbox verfctCodeWrap">
            <div class="verfctInput">
                <label for="verifyCode"><img src="/static/images/icon_verify.png" alt="验证码"></label>
                <input id="verifyCode" name="verify" placeholder="验证码"/>
            </div>
            <a href="javascript:void(0);" class="verfctCode">
                <img id="img" onclick="this.src = '{:captcha_src()}?a=' + new Date()" src="{:captcha_src()}">
            </a>
        </div>
        <div class="layui-form-item">
            <label style="font-size: 16px;" class="errordata"></label>
            <input type="button" value="登录" onclick="mysubmit();" class="btn_q"/>
        </div>
    </form>
</div>

<script src="__STATIC__/h-ui/js/H-ui.js" type="text/javascript"></script>

<script>
    function mysubmit() {
        $("#formbox").ajaxSubmit({
            type: 'post',
            url: '{:url("auth/logindo")}',
            success:function (data) {
                if (data.status==0){
                    $(".errordata").text(data.error);
                    $("#img").attr('src','{:captcha_src()}?a=' + new Date());
                }else{
                    window.location.href="{:url('index/index')}";
                }
            }
        })
    }

    function play() {
        if ($("#bgm")[0].paused) {
            $("#bgm")[0].play();
            $(".musicctl").addClass("Rotation");
        } else {
            $("#bgm")[0].pause();
            $(".musicctl").removeClass("Rotation");
        }
    }

    $(function () {
        // $("#bgm")[0].play();
        $(".musicctl").addClass("Rotation");
    })


</script>

</body>
</html>
